<template>
  <div @click='tip($event)' id='showMessage'>

    <div v-if="type=='all'">
      <msg style="padding-top: 30px;" v-if='pageType=="baoming"' :title="statusMsg" :description="''" :icon="icon"></msg>
      <msg style="padding-top: 70px;" v-if='pageType!="baoming"' :title="statusMsg" :description="''" :icon="icon"></msg>
    </div>

    <Card v-if='type=="all"||type=="user"' :header="{title: '报名信息'}">
      <p class="card-padding" slot="content">
        <group>
          <cell :title="eventName" :value="statusMsg"></cell>
          <cell-form-preview :list="userList"></cell-form-preview>
        </group>
      </p>
    </Card>

    <Card v-if='(type=="all"||type=="order")&&(!!list.orderid)' :header="{title: '支付信息'}">
      <p class="card-padding" slot="content">
        <group>
          <cell v-if='!list.refundid&&Object.prototype.toString.call(list.order) !=="[object Array]"' :title="'订单金额'" :value="payMsg"></cell>
          <cell v-if='!!list.refundid&&Object.prototype.toString.call(list.order) ==="[object Array]"' :title="'退款金额'" :value="refundMSG"></cell>
          <cell-form-preview :list="orderList"></cell-form-preview>
        </group>
      </p>
    </Card>

    <div v-if='type=="all"||type=="user"||type=="button"'>
      <group v-if='!list.pay_at'>
        <cell title="去支付" @click.native="pay1()" :is-link=true :inline-desc="paystatus"></cell>
      </group>

      <group v-if="!($route.path=='/messagedetail'||$route.path=='/message')">
        <cell title="查看详情" @click.native="godetail()" :is-link=true></cell>
      </group>

      <group v-if="!list.bib&&!!list.prefix_bib">
        <cell @click.native='appeal' title="分区申诉" :is-link=true></cell>
      </group>
      <!--       
      <group v-if="!!list.editable">
        <cell title="修改资料" @click.native="goEdit()" :is-link=true></cell>
      </group>
      -->
      <group>
        <cell title="修改资料" @click.native="goEdit()" :is-link=true></cell>
      </group>

      <group v-if='!list.pay_at&&(!!idnum||!!idnum2)'>
        <cell title="删除报名" @click.native="remove()" :is-link=true></cell>
      </group>

      <group v-if="!!list.pay_at&&!list.refundid">
        <cell title="退款" @click.native="_getRefund()" :is-link=true></cell>
      </group>

      <group v-if='!!showShare&&!list.refundid&&!!list.pay_at '>
        <cell title="分享返现" @click.native="goshare()" :is-link=true></cell>
      </group>

      <!-- <group v-if="!!list.refundid&&(!!idnum||!!idnum2)&&!list.order.data">
        <cell title="查看退款进度" @click.native="_refundProgress()" :is-link=true></cell>
      </group> -->
    </div>

    <div class="pushidnum" v-transfer-dom>
      <confirm v-model="showrefund" ref="confirm5" title="去退款" @on-confirm="_getRefund2()">

        <p style="text-align:left;">申请退款后，您的参赛资格将不予保留，您可以获得{{amount}}元退款。如果您确认要退出，请在下方输入您的证件号并点击确定按钮</p>
        <group>
          <x-input placeholder="输入证件号" v-model="idnum3"></x-input>
        </group>

      </confirm>
    </div>

    <div v-transfer-dom>
      <alert v-model="showtip3" title="分区说明">
        <div style="text-align: left;">
          <p style="padding-bottom: 10px;">1、根据中国田协网站查询到的您的历史成绩划分出发分区，具体分区标准请参考赛事公告；</p>
          <p style="padding-bottom: 10px;">2、赛事在各个分区前均设置计时地毯，如您对自己的出发分区没有疑问，请您务必在正确的分区出发，否则会导致成绩无效；</p>
          <p style="padding-bottom: 10px;">3、如您有充份的成绩证明，您可以申请调换到更靠前的分区；</p>
          <p style="padding-bottom: 10px;">4、欢乐跑项目统一在F区出发；</p>
          <p>5、赞助商、媒体等渠道报名的选手及候补成功选手的出发分区将在报名候补工作结束后统一进行更新。</p>
        </div>
      </alert>
    </div>

    <div v-transfer-dom>
      <alert v-model="showtip1" title="抽签代码说明">
        <div style="text-align: left;">
          <p style="padding-bottom: 10px;">1、抽签代码不等于您的候补顺序号，您现在在未中签选手中的排名为您的抽签代码减去该项目的中签选手数；</p>
          <p style="padding-bottom: 10px;">2、如果您需要参与候补，请您在规定时间内完成支付，否则表示您放弃候补；</p>
          <p>3、候补顺序号将在报名关闭后根据选手的支付情况及未中签选手的抽签代码按自小到大的顺序进行统一更新。</p>
        </div>
      </alert>
    </div>

    <div v-transfer-dom>
      <alert v-model="showtip2" title="候补顺序说明">
        <div style="text-align: left;">
          <p style="padding-bottom: 10px;">1、候补顺序表示排在您前边的处于候补状态的人数，该数字由您抽签时的抽签代码自小到大排列；</p>
          <p style="padding-bottom: 10px;">2、当有中签选手退出报名或者候补顺序比您小的选手退出候补，则您的候补顺序将递减；</p>
          <p style="padding-bottom: 10px;">3、候补是否成功由您的候补位置以及实际退出报名的选手人数决定；</p>
          <p style="padding-bottom: 10px;">4、候补顺序每天更新一次；</p>
          <p>5、候补结束如您未候补成功，我们将为您全额退还报名费。</p>
        </div>
      </alert>
    </div>

  </div>
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";

var isMini = false;
//判断环境 是否在小程序
var checkIsFromMiniProgram = function() {
  wx.miniProgram.getEnv(function(res) {
    console.log("minprogram:" + res.miniprogram); // true
    //  alert(JSON.stringify(res));
    if (res.miniprogram === true) {
      isMini = true;
      // alert('isMiniprogram:' + res.miniprogram);
    } else {
      isMini = false;
      // alert("========公众号");
    }
  });
};

import { TransferDomDirective as TransferDom } from "vux";
import Bus from "@/common/js/bus.js";
import {
  Confirm,
  Msg,
  debounce,
  XInput,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Card,
  Flexbox,
  FlexboxItem,
  XTable,
  Alert,
  ViewBox,
  XHeader,
  CellFormPreview,
  Group,
  Scroller
} from "vux";
//axios
import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";

import { isIdNumber, formatTime, toDecimal2 } from "@/common/js/main.js";

//@type[string] all  user显示用户信息    button 显示按钮 order 显示订单
export default {
  props: {
    page: {},
    host: {},
    userKey: {
      type: String,
      required: true
    },
    type: {
      type: String,
      required: true
    },
    idnumber: ""
  },
  data() {
    return {
      amount: "",
      idnum3: "",
      showtip1: false,
      showtip3: false,
      showtip2: false,
      showShare: false,
      paystatus: "",
      idnum2: "",
      disabled: false,
      showrefund: false,
      pageType: "", //页面类型
      icon: "", //状态icon
      statusMsg: "", //状态
      eventName: "", //赛事名称
      userList: [], //用户信息列表
      orderList: [], //订单信息列表
      payMsg: "", //订单金额
      list: {}
    };
  },
  computed: {},
  created() {
    this.idnum = this.idnumber;
    //console.log(this.$route.query._from)
    this.showShare = !!this.$route.query._from;

    console.log(this.userKey);

    this.pageType = window.localStorage.pageType;

    //console.log(this.userKey);

    this.getMessage();
  },
  mounted() {},
  methods: {
    appeal() {
      //link='//xian42195.com/wenjuan/5ba1fa454c6c1'
      window.location.href = "https://xian42195.com/wenjuan/5ba1fa454c6c1";
    },
    goshare() {
      this.$router.push(`/share?userKey=${this.userKey}`);
    },
    tip(event) {
      if (event.target.className.indexOf("undraw_tip") != -1) {
        this.showtip1 = true;
      } else if (event.target.className.indexOf("wait_tip") != -1) {
        this.showtip2 = true;
      } else if (event.target.className.indexOf("partition_tip") != -1) {
        this.showtip3 = true;
      }
      //console.log(event.target.className)
    },
    _getRefund2() {
      var _this = this;
      //console.log(this.idnum)
      if (!!this.idnum) {
        if (this.idnum !== this.idnum3) {
          _this.$vux.toast.show({
            type: "warn",
            text: "输入的证件号与操作的证件号不一致"
          });
          return;
        }
      } else {
        if (this.idnum2 !== this.idnum3) {
          _this.$vux.toast.show({
            type: "warn",
            text: "输入的证件号与操作的证件号不一致"
          });
          return;
        }
      }

      _this.axios
        .post(
          `${window.host}refund/create`,
          qs.stringify({
            //eventid: this.eventId,
            id: this.userKey,
            idnum: this.idnum
          })
        )
        .then(function(response) {
          if (response.data.code == "200") {
            //退款成功
            _this.$vux.toast.show({
              time: "5000",
              type: "success",
              text: "报名费将在一周内退回您报名时支付的账户",
              onHide() {
                windows.location.href = windows.location.href;
              }
            });
          } else if (response.data.code == "0") {
            _this.$vux.toast.show({
              time: "5000",
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    _getRefund() {
      let _this = this;
      //console.log('---')
      //console.log(this.key)
      //console.log(!!cookie.get('_sid'))
      if (!cookie.get("_sid")) {
        var data = {};
        data.msg = "";
        Bus.$emit("showLogin", data);
        return;
      }

      this.axios
        .post(
          `${window.host}refund/rule`,
          qs.stringify({
            //eventid: this.eventId,
            id: this.userKey
          })
        )
        .then(function(response) {
          if (response.data.code == "200") {
            _this.eventData = response.data.data;
            _this.amount = toDecimal2(response.data.data.amount);

            _this.showrefund = true;
            // console.log(_this.listAll.order.data.idnum)
            // console.log(_this._key)
            // console.log(_this.idnum)
            // console.log(_this.amount)

            // _this.$router.push({
            //   name: "declare",
            //   params: {
            //     type: "refund",
            //     key: _this._key,
            //     id: _this.listAll.order.data.idnum,
            //     amount: _this.amount
            //   }
            // });
          } else {
            //_this.$router.push({name: 'declare', params: {type: 'refund', key: _this.key, id: _this.idnum,amount:_this.amount}})
            // _this.$vux.toast.show({
            //   type: "warn",
            //   text: response.data.msg
            // });
          }
          /*_this.$vux.loading.hide()*/
        });
    },
    //查看退款进度
    _refundProgress() {
      this.axios
        .post(
          `${window.host}refund/query`,
          qs.stringify({
            id: this.userKey,
            idnum: this.idnum || this.list.order.data.idnum,
            json: 1
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            //console.log(response.data.data)
            indexedDB(
              "refundInfo",
              "set",
              this.RACEID,
              response.data.data,
              function() {}
            );
            this.$router.push("/timeline");
          } else {
            //console.log(response)
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    remove() {
      var _this = this;
      this.$vux.confirm.show({
        title: "删除报名",
        content:
          "每个证件号（每名选手）至多可以删除一次报名，删除报名后，可以重新报名任何其它项目，您当前项目的报名资格将不再保留。",
        // 组件除show外的属性
        onCancel() {},
        onConfirm() {
          //console.log(_this.key)
          //console.log(_this.idnum)
          //return
          _this.axios
            .post(
              `${window.host}registration/del`,
              qs.stringify({
                id: _this.userKey,
                idnum: _this.idnum || _this.list.order.data.idnum
              })
            )
            .then(response => {
              if (response.data.code == "200") {
                _this.$vux.toast.show({
                  type: "success",
                  text: "删除成功",
                  onHide() {
                    indexedDB(
                      "IDNumber",
                      "remove",
                      this.RACEID,
                      "",
                      function(a) {}.bind(this)
                    );
                  }
                });
              } else {
                if (response.data.code == "0") {
                  _this.$vux.toast.show({
                    type: "warn",
                    text: response.data.msg
                  });
                }
                //console.log(response)
                // _this.$vux.toast.show({
                //   type: "warn",
                //   text: response.data.msg
                // });
              }
            });
        }
      });
    },
    goEdit() {
      //修改报名资料
      //this.eventid =  this.$route.query.eventid;
      this.$router.push({
        name: "modify",
        query: {
          userKey: this.userKey,
          eventid: this.list.event.id
        }
      });
    },
    godetail() {
      var _this = this;
      //cookie.set("idnum", this.idnum);
      //window.location.href='www.baidu.com'
      _this.$router.push({
        name: "message",
        query: { _key: this.userKey, race_id: window.pageConfig.raceid }
      });
    },
    pay1() {
      var _this = this;
      //  判断下环境
      if (typeof wx !== "undefined") {
        checkIsFromMiniProgram();
      }

      // if (!!this.disabled) {
      //   return;
      // }

      //console.log(isMini)
      if (isMini) {
        //console.log("进入小程序");
        //if (checkIsFromMiniProgram()) {
        //如果是小程序走小程序支付逻辑

        //如果不能支付就弹出提示
        if (this.payable != 1) {
          return;
        }
        //console.log("可以支付");

        //可以支付
        //console.log("支付之前");
        //console.log('key'+this._key);
        sendPay(`${window.host}registration/pay`, {
          //raceid: this.raceid,
          id: this.userKey
        }).then(response => {
          if (response.data.code == "200") {
            let orderid = response.data.data.url.replace(
              "https://ihuipao.cn/pay/show/",
              ""
            );
            //console.log("支付完成");

            //console.log('orderid'+orderid)

            axios
              .post(
                `${window.host}api/miniprogram/pay`,
                qs.stringify({
                  orderid: orderid,
                  openid: window.localStorage.getItem("openid"),
                  app: "registration"
                })
              )
              .then(
                response => {
                  if (response.data.code == "200") {
                    var payParam = {
                      appId: response.data.data.appId,
                      nonceStr: response.data.data.nonceStr,
                      package: response.data.data.package,
                      signType: response.data.data.signType,
                      timeStamp: response.data.data.timeStamp,
                      paySign: response.data.data.paySign,
                      _key: this.userKey
                    };

                    var url =
                      "/pages/wxpay/wxpay?payParam=" +
                      encodeURIComponent(JSON.stringify(payParam));
                    wx.miniProgram.navigateTo({
                      url: url
                    });
                  }
                },
                error => {
                  console.log(error);
                }
              );
          }
        });
      } else {
        //如果不在小程序走网页跳转逻辑
        this.pay();
      }
    },
    //去支付
    pay() {
      let _this = this;

      if (!!_this.list.event.cutdown && _this.list.event.cutdown <= -1) {
        _this.countTime = _this.list.event.cutdown;

        let countDown = setInterval(() => {
          this.$vux.loading.show({
            text: _this.countTime
          });
          _this.countTime--;
          if (_this.countTime <= 0) {
            clearInterval(countDown);
            this.$vux.loading.hide();
            this.pay();
          }
        }, 1000);
      } else {
        this.axios
          .post(
            `${window.host}registration/pay`,
            qs.stringify({
              //raceid: this.raceid,
              id: this.userKey
            })
          )
          .then(response => {
            //console.log(response)
            if (response.data.code == "200") {
              window.location.href = response.data.data.url;
            } else {
              //console.log(response)
              this.$vux.toast.show({
                type: "warn",
                text: response.data.msg
              });
            }
          });
      }
    },
    getMessage() {
      console.log(this.$route.path);
      if (this.$route.path == "/message") {
        var config = {
          id: this.userKey,
          full: 1
        };
      } else {
        var config = {
          id: this.userKey
        };
      }
      this.axios
        .post(`${window.host}registration/show`, qs.stringify(config))
        .then(response => {
          //console.log(response.data.data.data);

          var list = response.data.data;

          this.list = list;
          console.log(this.list);

          if (!this.idnum) {
            if (!!list.order && !!list.order.data) {
              this.idnum2 = list.order.data.idnum;
            }
          }

          if (!!list.refund) {
            this.refundMSG = toDecimal2(list.refund.amount);
          }

          //console.log(this.refundMSG)
          //console.log(list)

          this.paystatus = list.event.paystate;

          //alert(this.paystatus)
          this.eventName = list.event.name;

          //用户信息

          var payMessage = "";
          var message = "";

          //判断支付状态
          if (!!list.invite && !!list.pay_at) {
            //已支付
            payMessage = "/已支付";
          } else if (!!list.invite && !list.pay_at) {
            if (!!list.refundid) {
              //未支付
              payMessage = "/有退款";
            } else {
              //未支付
              payMessage = "/未支付";
            }
          } else if (!!list.refundid) {
            //有退款
            payMessage = "/有退款";
          } else if (!!list.pay_at && !list.refundid) {
            //已支付
            payMessage = "/已支付";
          } else if (!!list.pay_at && !!list.refundid && !!list.invite) {
            //邀请码报名
            payMessage = "/已支付";
          } else if (!list.pay_at && !!list.refundid && !!list.invite) {
            //邀请码报名
            payMessage = "/未支付";
          } else if (!list.pay_at) {
            //未支付
            payMessage = "/未支付";
          }

          //判断报名状态
          if (list.state === "normal" && !!list.pay_at) {
            this.icon = "success";
            message = "报名成功";
          } else if (list.state === "normal" && !!list.invite) {
            this.icon = "success";
            message = "报名成功";
          } else if (list.state === "normal") {
            this.icon = "info";
            message = "报名正常";
          } else if (list.state === "waitfail") {
            this.icon = "warn";
            message = `候补结束，未获得名额`;
          } else if (list.state === "wait") {
            this.icon = "waiting";
            if (!!list.pos) {
              //候补 有post人数
              message = `候补中`;
            } else {
              //候补 没有post人数
              message = `候补中`;
            }
          } else if (list.state == "draw") {
            this.icon = "waiting";
            message = `等待抽签`;
          } else if (list.state === "undraw") {
            this.icon = "warn";
            message = `未中签`;
          } else if (list.state === "audit") {
            this.icon = "waiting";
            message = `审核中`;
          } else if (list.state === "auditfail") {
            this.icon = "warn";
            message = `审核未通过(${list.refusemsg})`;
            if (!!list.refusemsg) {
              message = `审核未通过`;
            }
          }

          //状态
          this.statusMsg = message + payMessage;

          //姓名 组别 参赛号 费用 下单时间  按钮[详细资料,修改资料,取消报名,申请退款,去支付]

          this.userList.push({
            label: "姓名",
            value: `${list.name}`
          });

          this.userList.push({
            label: "组别",
            value: `${list.event.name}`
          });

          if (!!list.bib) {
            this.userList.push({
              label: "参赛号",
              value: `${list.bib}`
            });
          }

          if (!list.bib && !!list.prefix_bib) {
            this.userList.push({
              label: "分区",
              value: `${list.prefix_bib}`
            });
          }

          this.userList.push({
            label: "费用",
            value: `${toDecimal2(list.event.price)}`
          });

          if (!!list.created_at) {
            this.userList.push({
              label: "下单时间",
              value: `${list.created_at}`
            });
          }

          if (!!list.invite) {
            this.userList.push({
              label: "邀请码",
              value: `${list.invite}`
            });
          }

          //console.log(list)

          if (list.state === "undraw" && !!list.wait_pos) {
            this.userList.push({
              label: "抽签代码",
              value: `${list.wait_pos}`
            });
          }

          // if (true) {
          //   this.userList.push({
          //     label: "抽签代码",
          //     value: `${list.wait_pos}`
          //   });
          // }
          //console.log(list.post)
          if (list.state === "wait" && !!list.pos) {
            this.userList.push({
              label: "候补顺序",
              value: `${list.pos}`
            });
          }

          //支付按钮的状态
          //paystate，有四种状态：unstart，未开放，finish已结束，close，关闭，opening，开放中。
          if (list.event.paystate == "opening") {
            //未开放
            this.paystatus = "(开放中)";
            this.disabled = false;
          } else if (this.paystatus == "close") {
            this.paystatus = "(关闭中)";
            this.disabled = true;
          } else if (this.paystatus == "unstart") {
            this.paystatus = "(未开放)";
            this.disabled = true;
          } else if (this.paystatus == "finish") {
            this.paystatus = "(已结束)";
            this.disabled = true;
          }

          if (
            !!list.invite ||
            !!window.localStorage.getItem("invitationCode")
          ) {
            this.paystatus = "(开放中)";
            this.disabled = false;
          }

          setTimeout(() => {
            var doms = document.querySelectorAll(".weui-form-preview__label");
            [].forEach.call(doms, e => {
              //console.log(e.innerHTML);
              if (e.innerHTML == "抽签代码") {
                var node = document.createElement("span");
                node.setAttribute("class", "undraw_tip tip");
                node.innerHTML = "?";
                e.parentElement
                  .querySelector(".weui-form-preview__value")
                  .appendChild(node);
              } else if (e.innerHTML == "候补顺序") {
                var node = document.createElement("span");
                node.setAttribute("class", "wait_tip tip");
                node.innerHTML = "?";
                e.parentElement
                  .querySelector(".weui-form-preview__value")
                  .appendChild(node);
              } else if (e.innerHTML == "分区") {
                var node = document.createElement("span");
                node.setAttribute("class", "partition_tip tip");
                node.innerHTML = "?";
                e.parentElement
                  .querySelector(".weui-form-preview__value")
                  .appendChild(node);

                //console.log(e.parentElement)
              }
            });
          }, 1000);

          //订单信息
          //console.log(list);
          //如果有订单信息
          if (!!list.order.data) {
            this.payMsg = "¥" + list.order.amount;
            this.orderList.push({
              label: "订单名称",
              value: list.order.subject
            });

            this.orderList.push({
              label: "订单摘要",
              value: list.order.description
            });

            //如果支付了 展示支付时间
            if (!!list.order.pay_at) {
              this.orderList.push({
                label: "支付时间",
                value: list.order.pay_at
              });
            }

            //payment:[invite ,alipay,wechat,paypal]
            if (!!list.order.payment) {
              switch (list.order.payment) {
                case "invite":
                  this.orderList.push({
                    label: "支付方式",
                    value: "邀请码"
                  });
                  break;
                case "alipay":
                  this.orderList.push({
                    label: "支付方式",
                    value: "支付宝"
                  });
                  break;
                case "wechat":
                  this.orderList.push({
                    label: "支付方式",
                    value: "微信"
                  });
                  break;
                case "paypal":
                  this.orderList.push({
                    label: "支付方式",
                    value: "PayPal"
                  });
                  break;
                default:
              }
            }

            if (!!list.order) {
              if (!!list.order.trade_no) {
                this.orderList.push({
                  label: "交易流水号",
                  value: list.order.trade_no
                });
              }
            }

            // if (!!list.refund) {
            //   if (!!list.refund.meta.fee) {
            //     this.orderList.push({
            //       label: "退款金额",
            //       value: "¥" + list.refund.meta.fee
            //     });
            //   }
            // }
          }
        });
    }
  },
  components: {
    Confirm,
    debounce,
    XInput,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Card,
    Flexbox,
    FlexboxItem,
    XTable,
    Alert,
    ViewBox,
    XHeader,
    Msg,
    CellFormPreview,
    Group,
    Scroller
  },
  directives: {
    TransferDom
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
@import "~vux/src/styles/1px.less";

#showMessage .weui-cells {
  margin-top: 0;
}

#showMessage .tip {
  background: #24a2ff;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 15px;
  //text-indent: 5px;
  color: white;
  position: relative;
  top: -5px;
  font-size: 12px;
}

#showMessage .vux-label {
  float: left;
  margin-right: 1em;
  min-width: 4em;
  color: #999999;
  text-align: justify;
  text-align-last: justify;
}

#showMessage .weui-cell__ft {
  text-align: right;
  font-size: 1.2em;
  color: black;
}

#showMessage .card-padding {
  padding: 0px;
}

.pushidnum .vux-x-dialog .vux-x-input input {
  width: 100%;
}

.pushidnum .weui-cells {
  margin-top: 0;
}

.pushidnum .weui-cells:after {
  display: none;
}

.pushidnum .vux-x-input {
  padding-left: 0;
}
</style>






